<script setup lang="ts">
import router from '@/router';
import type { StudyTreeItem } from '@/views/Square/LearningSquare/SkillTree/home/types/StudyTreeItem';
import { PlayCircleOutlined } from '@ant-design/icons-vue';
const props = defineProps<{ studyTreeItem: StudyTreeItem }>();

const onStudyBtnClicked = () => {
  router.push({
    name: "skill-tree-details",
    params: { id: props.studyTreeItem.id },
  });
};
</script>

<template>
  <div class="skill-tree-card">
    <img :src="studyTreeItem.imageUrl" alt="skill tree image" class="skill-tree-preview-image">
    <p class="skill-tree-name">
      {{ studyTreeItem.name }}
    </p>

    <p class="skill-tree-description">
      {{ studyTreeItem.description }}
    </p>
    <div style="display: flex; flex-direction: row; justify-content: end; margin: 0rem 0.5rem 0.5rem 0.5rem;">
      <a-button type="primary" @click="onStudyBtnClicked">
        开始学习
        <template #icon>
          <PlayCircleOutlined />
        </template>
      </a-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.skill-tree-card {
  background-color: white;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: scale(0.95);
  }

}

.skill-tree-name {
  font-size: 1rem;
  font-weight: bold;
  margin: 0.5rem;
  margin-top: 0rem;
  text-align: left;
  // 最多显示1行
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-tree-preview-image {
  object-fit: cover;
  height: 7rem;
  border-radius: 0.5rem;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.skill-tree-description {
  font-size: 0.8rem;
  margin: 0rem 0.5rem 0.5rem 0.5rem;
  color: grey;
  // 最多显示3行，且保持3行的高度
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2em;
  min-height: 3.6em;
}
</style>
